<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计算题生成器</title>
    <style type="text/css">
        body {
            margin: 0;
            background-color:#b1b1b1;
        }
        input[type="file"] {
            position:absolute;left:20px;top:430px;
        }
    </style>
</head>
<body>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/minicomps.min.js"></script>
    <script src="../libs/pinyin_dict_all.js"></script>
    <script src="../libs/easeljs.js"></script>
    <script src="../libs/moonEaseljs.js"></script>
    <script>
        const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,Image,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown} = mc
        const width = Stage.width;
        const height = Stage.height;
        var canvasW=794;
        var canvasH=1123;
        var canvasX=(width-canvasW)/2;
        var tians=[];
        var fonts=[];
        const parent=document.body;
        if(Unify.isMobile()){
            canvasW=width;
            canvasH=height;
            new Label(parent,300,200,'推荐使用电脑打开操作').setFontSize(50);
        }

        createjs.Ticker.framerate = 30;
        var canvas=new Canvas(parent,canvasX,0,canvasW,canvasH);
        var stage=new createjs.Stage(canvas);
        createjs.Ticker.addEventListener("tick",(e)=>{stage.update();});

        var layerBg=new createjs.Container();
        var layerContent=new createjs.Container();
        var layerName=new createjs.Container;
        var layerSign=new createjs.Container;
        stage.addChild(layerBg);
        stage.addChild(layerContent);
        stage.addChild(layerName);
        stage.addChild(layerSign);

        layerBg.addChild(moonRect(canvasW,canvasH,"#FFF"));

        function createRect(w=100,h=100,color="#ffffff"){
            let shape = new createjs.Shape();
            let [w2,h2]=[w/2,h/2];
            shape.graphics.f(color).dr(-w2,-h2,w,h);
            return shape;
        }

        let [x,y,type]=[10,10,0];
        let names=['只要除法','只要乘法','有乘有除','只要加法','只要减法','有加有减'];
        new Dropdown(parent,x,y,names,0,onChangeType).setSize(150);
        let titleLabel=new LabelInput(parent,x,y+=30,"一页题目数量").input.setText(21);
        let leftLabel=new LabelInput(parent,x,y+=30,"符号左边位数").input.setText(3);
        let rightLabel=new LabelInput(parent,x,y+=30,"符号右边位数").input.setText(2);
        let lineLabel=new LabelInput(parent,x,y+=30,"一行题目数量").input.setText(3);
        new Button(parent,x,y+=30,"生成题目",onGenerate);
        new Button(parent,x,y+=30,'下载本页',()=>Unify.saveCanvas(canvas._canvas));

        new Label(parent,x,y+=60,"下面所生成的内容可自由拖动，双击可删除");
        new Button(parent,x,y+=30,"生成*图",onCreateStar);
        new Button(parent,x,y+=30,"最左列生成*图",onCreateStarLeft);
        //let signLabel=new LabelInput(parent,x,y+=30,"增加说明").input.setText('加*图标的需要验算');
        new Label(parent,x,y+=30,'增加说明');
        let signLabel=new TextArea(parent,x+50,y-5,"加*图标的需要验算");
        signLabel.setSize(150,60);
        new Button(parent,x,y+=70,"生成文字",onCreateTip);
        new Button(parent,x,y+=30,"生成班级姓名",onCreateName);
        new Button(parent,x,y+=30,"生成答案",onCreateAnswer);
        new Button(parent,x,y+=30,"全部删除",onRemoveAll);

        
        function onChangeType(e){
            type=Number(e.detail.index);
            console.log(type);
        }
        function onCreateName(){
            layerName.removeAllChildren();
            let className=createClassName();
            layerName.addChild(className);
            className.addEventListener('dblclick',removeItem);
            moonDrag(className);
        }
        function removeItem(e){
            let parent=e.currentTarget.parent;
            let target=e.currentTarget;
            parent.removeChild(target);
        }
        function onCreateStar(){
            let starBg=new createjs.Container();
            starBg.addChild(moonRect(15,15,"#fff"));
            let txt=new createjs.Text('*', `30px 黑体`, '#000');
            txt.y=-5;
            starBg.addChild(txt);
            [starBg.x,starBg.y]=[450,10]
            starBg.width=starBg.height=10;
            layerSign.addChild(starBg);
            moonDrag(starBg);
            starBg.addEventListener('dblclick',removeItem);
            return starBg;
        }
        function onCreateStarLeft(){
            let total=Number(titleLabel.text);
            let xNum=Number(lineLabel.text);
            let yNum=Math.ceil(total/xNum);
            let [xDis,yDis]=[canvasW/(xNum+1),canvasH/(yNum+1)];
            let x=(canvasW/xNum)/4+xDis*(xNum-1);
            let y=canvasH/(yNum)/3+5;
            let signs=[];
            for(let i=0;i<yNum;i++){
                signs.push(onCreateStar());
            }
            console.log(signs,xDis,yDis,x,y)
            Unify.displayRank(signs,1,xDis,yDis,x,y);
            
        }
        function onCreateTip(){
            let txt=new createjs.Text(signLabel.text, `20px 黑体`, '#000');
            txt.x=500;
            txt.y=5;
            layerSign.addChild(txt);
            txt.addEventListener('dblclick',removeItem);
            moonDrag(txt);
            return txt;
        }
        function onGenerate(){
            let [leftNum,rightNum]=[Number(leftLabel.text),Number(rightLabel.text)];
           
            let total=Number(titleLabel.text);
            let xNum=Number(lineLabel.text);
            let yNum=Math.ceil(total/xNum);
            let [xDis,yDis]=[canvasW/(xNum+1),canvasH/(yNum+1)];

            layerContent.removeAllChildren();
            for(let i=0;i<total;i++){
                a=Unify.getRandomWeiShu(leftNum);
                b=Unify.getRandomWeiShu(rightNum);
                //如果a小于b，则交换两个数
                if(a<b){
                    let temp=a; a=b; b=temp;
                }
                let val;
                switch(type){
                    case 0:val=a+'÷'+b+'=';break;
                    case 1:val=a+'×'+b+'=';break;
                    case 2:val=Math.random()>0.5?(a+'÷'+b+'='):(a+'×'+b+'=');break;
                    case 3:val=a+'+'+b+'=';break;
                    case 4:val=a+'-'+b+'=';break;
                    case 5:val=Math.random()>0.5?(a+'+'+b+'='):(a+'-'+b+'=');break;
                }
                let txt=new createjs.Text(val, `22px 黑体`, '#000');
                txt.width=txt.height=10;
                txt.addEventListener('dblclick',removeItem);
                layerContent.addChild(txt);
            }
            let x=(canvasW/xNum)/4;
            let y=canvasH/(yNum)/3;
            Unify.displayRank(layerContent.children,xNum,xDis,yDis,x,y);

        }
        function onCreateAnswer(){
            let signs=['+','-','×','÷'];
            layerContent.children.forEach(txt => {
                let ts=txt.text.split('=')[0];
                let [s,v]=['',0];
                signs.find(a=>{
                    if(ts.includes(a)){
                        ts=ts.split(a);
                        s=a;
                        return true;
                    }
                })
                let [a,b]=[Number(ts[0]),Number(ts[1])]
                if(s=='÷'){
                    let x=a%b;
                    let y=(a-x)/b;
                    v=y+'...'+x;
                }else{
                    s=s=='×'?'*':s;
                    v=eval(ts[0]+s+ts[1]);
                }
                txt.text+=v;
            });
        }
        function onRemoveAll(){
            layerContent.removeAllChildren();
            layerName.removeAllChildren();
            layerSign.removeAllChildren();
        }

        if(Unify.isMobile()){
            canvas.y=y+=30;
            canvas.x=0;
        }
    </script>
</body>

</html>